<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-v2.5.17.js"></script>
    <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>-->

</head>
<body>
    <!--创建了一块空间， 包含vue元素-->
    <div id="app">

        <p v-if="flag">
            这是一个段落
        </p>
        <p v-else>
            flag为false
        </p>

        <!--
            v-if : 控制元素是否加载
            v-show：无论真假都会加载元素， 以display 控制元素是否显示
        -->
        <p v-if="i<0">
            i 是一个负数
        </p>
        <p v-else-if="i=0">
            i 等于0
        </p>
        <p v-else>
            i 是一个正数
        </p>

        <p v-if="flag">
            我用的是 v-if语句
        </p>
        <p v-show="flag">
            我用的是 v-show语句
        </p>
    </div>



</body>
<script>
    new Vue({
        el: "#app",  //指定vue管理的元素
        // 定义数据（model）
        data: {
            i : -1,
            flag: true
        },
        //定义方法
        methods: {
            sayHello(){
                return "HelloWorld"
            }
        }
    });

</script>
</html>